<template>
  <div class="demonstration-card animate__animated animate__bounceIn" @click="toggleAuto(info.name)">
    <diV class="demonstration-card-top">
      <img :src="info.icon" alt="" class="demonstration-card-top-icon">
      <p class="demonstration-card-top-name">{{ info.name }}</p>
    </diV>
    <div class="demonstration-card-bottom">
      <img :src="require('@/assets/auto-demonstration/microphone-on.png')" alt="" class="demonstration-card-bottom-icon" v-if="auto">
      <img :src="require('@/assets/auto-demonstration/microphone-off.png')" alt="" class="demonstration-card-bottom-icon" v-else>
      <p :class="['demonstration-card-bottom-tips', { 'c-disabled': !auto }]">自动演示</p>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, getCurrentInstance } from 'vue'

export default defineComponent({
  props: {
    info: {
      type: Object
    }
  },
  setup () {
    // data
    const auto = ref(true)

    // methods
    const toggleAuto = (name: string) => {
      console.log('name: ', name)
      auto.value = !auto.value
      send(name)
    }

    const internalInstance = getCurrentInstance()
    const send = (internalInstance as any).root.ctx.send
    return {
      auto,
      toggleAuto
    }
  }
})
</script>

<style lang="scss">
.demonstration-card {
  .demonstration-card-top {
    width: 3.25rem;
    height: 2.4rem;
    box-sizing: border-box;
    padding: .48rem .35rem;
    border-radius: .2rem .2rem 0 0;
    background-color: #313540;
    display: flex;
    justify-content: space-between;
    align-items: center;
    img.demonstration-card-top-icon {
      width: 1.44rem;
      height: 1.44rem;
    }
    .demonstration-card-top-name {
      width: .8rem;
      font-family: Arial;
      font-size: .4rem;
      font-weight: normal;
      font-stretch: normal;
      line-height: .55rem;
      letter-spacing: 0rem;
      color: #ffffff;
    }
  }
  .demonstration-card-bottom {
    width: 3.25rem;
    height: .96rem;
    box-sizing: border-box;
    padding: .22rem .2rem;
    background-color: #5a6174;
    border-radius:  0 0 .2rem .2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    img.demonstration-card-bottom-icon {
      width: .28rem;
      height: .41rem;
    }
    .demonstration-card-bottom-tips {
      font-family: Arial;
      font-size: .4rem;
      font-weight: normal;
      font-stretch: normal;
      line-height: .76rem;
      letter-spacing: 0rem;
      color: #ffffff;
    }
  }
}
</style>
